<template>
  <div class="item">
    <div class="item-left">
      <img src="@/assets/img/user.png" alt="" class="imgs" />
    </div>
    <div class="item-right">
      <div class="item-right-num">{{ users }}</div>
      <div class="item-right-words">注册用户</div>
    </div>
  </div>
  <div class="item">
    <div class="item-left">
      <img src="@/assets/img/Loser.png" alt="" class="imgs" />
    </div>
    <div class="item-right">
      <div class="item-right-num">{{ passLoser }}</div>
      <div class="item-right-words">已审批失联者</div>
    </div>
  </div>
  <div class="item">
    <div class="item-left">
      <img src="@/assets/img/noPassLoser.png" alt="" class="imgs" />
    </div>
    <div class="item-right">
      <div class="item-right-num">{{ noPassLoser }}</div>
      <div class="item-right-words">未审批失联者</div>
    </div>
  </div>
  <div class="item">
    <div class="item-left">
      <img src="@/assets/img/Volunteer.png" alt="" class="imgs" />
    </div>
    <div class="item-right">
      <div class="item-right-num">{{ passVolun }}</div>
      <div class="item-right-words">已审批志愿者</div>
    </div>
  </div>
  <div class="item">
    <div class="item-left">
      <img src="@/assets/img/noPassVol.png" alt="" class="imgs" />
    </div>
    <div class="item-right">
      <div class="item-right-num">{{ noPassVolun }}</div>
      <div class="item-right-words">未审批志愿者</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getAllLosers } from "@/server/loser";
import { getAllVoluns } from "@/server/volunteer";
import { getUserList } from "@/server/user";
// import "animate.css";

const users = ref(0);
const passLoser = ref(0);
const noPassLoser = ref(0);
const passVolun = ref(0);
const noPassVolun = ref(0);

onMounted(async () => {
  await getLoser();
  await getVolun();
  await getUser();
});
function getLoser() {
  getAllLosers().then((res: any) => {
    passLoser.value = res.data.filter((item: any) => item.state == 1).length;
    noPassLoser.value = res.data.filter((item: any) => item.state == 0).length;
  });
}
function getVolun() {
  getAllVoluns().then((res: any) => {
    passVolun.value = res.data.filter((item: any) => item.state == 1).length;
    noPassVolun.value = res.data.filter((item: any) => item.state == 0).length;
  });
}

function getUser() {
  getUserList().then((res: any) => {
    users.value = res.data.filter((item: any) => item.role == "user").length;
  });
}
</script>

<style scoped lang="less">
.item {
  // background-color: red;
  background-color: #374151;
  color: #fff;
  display: flex;
  border-radius: 10px;
  box-shadow: 0 0 10px 10px #eee;
  &-left {
    flex: 1;
    border-radius: 10px 0 0 10px;
    .imgs {
      width: 100%;
      height: 100%;
    }
  }
  &-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &-num {
      padding: 10px 25px;
      font-size: 40px;
      font-weight: 600;
    }
  }
}
</style>
